@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oleo Script Swash Caps', cursive;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #006bc6, #1ecafc);
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    h2{
        position: absolute;
        color: #ccc;
        font-size: 1.75em;
        font-weight: 500 ;
    }

}
.loader{
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: rgba(0,0,0,.25);
    filter: url(#gooey);
    span{
        position: absolute;
        left: 0;
        // 设置变换点 x,y,z, (x,y可以用top bottom left right center)
        transform-origin: 150px;
        background-color: #ccc;
        border-radius: 50%;
        // ease：开始很慢，但是很快就加速到⼀个⽐较⼤的速度，时间过半就开始缓慢减速，直到最后减速为0；
        // ease-in-out：开始慢，但是匀加速到⼀个速度⼤概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速
        // 核心
        animation:  animate 5s ease-in-out infinite;
        animation-delay: calc(0.15s * var(--i));
    }
}
svg{
    width: 0;
    height: 0;
}
@keyframes animate{
    0%,10%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg) translateX(120px);
    }
    // 核心部分
    40%,70%{
        width: 20px;
        height: 20px;
        // 8对应span的数量
        transform: rotate(calc(360deg / 12 * var(--i) ));
        box-shadow: 0 0 0 10px #ccc;
    }
    90%,100%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg) translateX(120px);
    }

}